<template>
	<div class="arrayTask" v-loading="loading2" element-loading-text="拼命加载中" style="width: 100%;">
		<div class="block right">
			<span class="wrapper">
			    <el-tooltip :manual="true" :value="deleteBtn" class="item" effect="dark" content="请选择一项任务进行删除" placement="left">
					<!-- <el-button  icon="close" @click="delAllClass" class="deleteBtn">删除排课任务</el-button> -->
					<button @click="delAllClass" class="deleteBtn opBtn">
						<i class="iconfont icon-shanchu enlarge"></i>
						<font>删除排课任务</font>
					</button>
			    </el-tooltip>
				<el-tooltip :manual="true" :value="editBtn" class="item" effect="dark" content="请选择一项任务进行修改" placement="right">
					<!-- <el-button  icon="document" @click="editInfo" class="editBtn">修改排课任务</el-button> -->
					<button @click="editInfo" class="editBtn opBtn">
						<i class="iconfont icon-icon_edit"></i>
						<font>修改排课任务</font>
					</button>
	      		</el-tooltip>
				<!-- <el-button  icon="plus" @click="dialogFormVisible = true" class="newAdd">新建排课任务</el-button> -->
				<button @click="dialogFormVisible = true" class="newAdd opBtn">
					<i class="iconfont icon-xinjian"></i>
					<font>新建排课任务</font>
				</button>
	 		</span>
		</div>

		<el-table ref="multipleTable" :data="queryScheduleTaskList" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="taskName" label="名称" align="center">
				<template slot-scope="scope">
					<a class="handIcon" @click="storage(scope.row,1)">{{scope.row.taskName}}</a>
				</template>
			</el-table-column>
			<el-table-column prop="gradeName" label="年级" align="center">
			</el-table-column>
			<el-table-column prop="term" label="学期" show-overflow-tooltip align="center">
				<template slot-scope="scope">
					<template v-if="scope.row.term == 1">第一学期</template>
					<template v-else>第二学期</template>
				</template>
			</el-table-column>
			<el-table-column align="center">
				<template slot-scope="scope">
					<template v-if="scope.row.status == 1">
						<span @click="storage(scope.row,2)">
							<el-button size="small" :plain="true" type="info"  @click="beforePaike">开始排课</el-button>
						</span>
					</template>
					<template v-else-if="scope.row.status == 2 || scope.row.status == 5">
						<span class="errorText">排课失败</span>
						<el-button size="small" :plain="true" type="danger" @click="storage(scope.row,2)">重新排课</el-button>
					</template>
					<template v-else-if="scope.row.status == 3">
						排课中
					</template>
					<template v-else-if="scope.row.status == 4">
						<el-button size="small" :plain="true" type="warning" @click="storage(scope.row,3)">查看课表</el-button>
						<el-button size="small" :plain="true" type="danger" @click="storage(scope.row,2)">重新排课</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="新建排课任务" :visible.sync="dialogFormVisible" size="tiny" @close='closeDialog'>
			<el-form :model="addForm" label-width="80">
				<el-form-item label="名称">
					<el-tooltip :manual="true" :value="addName" class="item" effect="dark" content="排课任务名称不能超过20个中文字符" placement="right">
						<el-input v-model="addForm.taskName" style="width: 80%;"></el-input>
					</el-tooltip>
				</el-form-item>
				<el-form-item label="年级  ">
					<el-select v-model="addForm.grade" placeholder="请选择年级" style="width: 80%;">
						<el-option v-for="item in gradeList" :key="item.key" :label="item.value" :value="item.key">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="学期">
					<el-col :span="9">
						<el-date-picker v-model="addForm.year" align="right" type="year" @change="changeTime" placeholder="请选择年度" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="1">年</el-col>
					<el-col :span="9">
						<el-select v-model="addForm.term" placeholder="请选择学期">
							<el-option label="第一学期" :value="1"></el-option>
							<el-option label="第二学期" :value="2"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item align="center">
					<el-tooltip :manual="true" :value="addBtn" class="item" effect="dark" content="请确认完善信息后提交" placement="right">
						<el-button type="primary" size="large" @click="addClass">保存</el-button>
					</el-tooltip>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-dialog title="更改排课任务" :visible.sync="editVisible" size="tiny">
			<el-form :model="editForm" label-width="80">
				<el-form-item label="名称">
					<el-tooltip :manual="true" :value="nullBtn" class="item" effect="dark" content="任务名称不能为空或大于20个中文字符" placement="right">
						<el-input v-model="editTaskName" style="width: 80%;"></el-input>
					</el-tooltip>
				</el-form-item>
				<el-form-item label="年级  ">
					<el-select v-model="editForm.gradeName" placeholder="请选择年级" style="width: 80%;" disabled>
						<el-option v-for="item in gradeList" :key="item.key" :label="item.value" :value="item.key">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="学期">
					<el-col :span="9">
						<el-date-picker v-model="editForm.year" align="right" type="year" @change="changeTime" placeholder="请选择年度" style="width: 100%;" disabled></el-date-picker>
					</el-col>
					<el-col class="line" :span="1">年</el-col>
					<el-col :span="9">
						<el-select v-model="editForm.termName" placeholder="请选择学期" disabled>
							<el-option label="第一学期" :value="1"></el-option>
							<el-option label="第二学期" :value="2"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item align="center">
					<el-button type="primary" size="large" @click="editClass">修改</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="layer">
			<el-dialog  :visible.sync="dialogVisible" title="删除排课任务" size="tiny" >
				<span>确认删除“{{deleteName}}”？</span>
				<span slot="footer" class="dialog-footer">
	    <!-- <el-button @click="dialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="enterDelete">删 除</el-button> -->
			<el-button type="primary" @click="enterDelete" class="enterDelete">确认删除</el-button>
	  </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import utils from '@/assets/js/urlConfig.js'
	export default {
		data() {
			return {
				queryScheduleTaskList: [],
				multipleSelection: [],
				dialogFormVisible: false,
				editVisible: false,
				addForm: {
					taskName: '',
					grade: '',
					term: '',
					year: '',
				},
				canClick: true,
				editForm: {
					taskName: '',
					grade: '',
					term: '',
					year: '',
				},
				editTaskName: "",
				gradeList: [],
				tnId: "",
				taskId: "",
				loading2: true,
				nullBtn: false,
				addBtn: false,
				deleteBtn: false,
				editBtn: false,
				dialogVisible:false,
				deleteName:"",
				addName:false,
			}
		},
		mounted() {
			this.getToken();
		},
		methods: {
			beforePaike() {
				sessionStorage.setItem('sideBar', 0);
			},
			queryScheduleTaskData() {
				this.$http.get(utils.UrlConfig.queryScheduleTask + "&tnId=" + this.tnId)
					.then(res => {
						res = res.data
						if(res.rtnCode === "0000000") {
							this.queryScheduleTaskList = res.bizData;
							this.loading2 = false;
						} else {
							this.$message.error(res.msg);
							this.loading2 = false;
						}
					}).catch(error => {
						console.log(error)
					})
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllClass() {
				if(this.multipleSelection.length == 1) {
					this.deleteName = this.multipleSelection[0].taskName;
					this.dialogVisible = true;
				} else {
					this.deleteBtn = true;
					setTimeout(() => {
						this.deleteBtn = false;
					}, 2000);
				}
			},

			editInfo() {
				if(this.multipleSelection.length == 1) {
					this.editForm = this.multipleSelection[0];
					this.editTaskName = this.multipleSelection[0].taskName;
					this.editVisible = true;
				} else {
					this.editBtn = true;
					setTimeout(() => {
						this.editBtn = false;
					}, 2000);
				}
			},
			getGradeList() {
				this.$http.get(utils.UrlConfig.queryGradeInfo)
					.then(res => {
						res = res.data
						if(res.rtnCode === "0000000") {
							this.gradeList = res.bizData;
						} else {
							this.$message.error(res.msg);
						}
					}).catch(error => {
						console.log(error)
					})
			},
			addClass() {
				if(this.canClick == true) {
					this.addForm.taskName = this.addForm.taskName.replace(/\s+/g, "");
					if(this.addForm.taskName.length > 20){
						this.addName = true;
						setTimeout(() => {
							this.addName = false;
						}, 2000);
						return false;
					}
					if(   this.addForm.taskName == ""  || this.addForm.grade == "" || this.addForm.year == "" || this.addForm.term == "") {
						this.addBtn = true;
						setTimeout(() => {
							this.addBtn = false;
						}, 2000);
					} else {
						this.canClick = false;
						this.$http.post(utils.UrlConfig.saveScheduleTask + "&tnId=" + this.tnId + "&taskName=" + this.addForm.taskName + "&grade=" + this.addForm.grade + "&year=" + this.addForm.year + "&term=" + this.addForm.term)
							.then(res => {
								res = res.data
								this.canClick = true;
								if(res.rtnCode === "0000000") {
									this.queryScheduleTaskData();
									this.dialogFormVisible = false;
									this.addForm.taskName = '';
									this.addForm.grade = '';
									this.addForm.term = '';
									this.addForm.year = '';
								} else {
									this.$message.error(res.msg);
								}
							}).catch(error => {
								this.canClick = true;
								console.log(error)
							})
					}
				}
			},
			changeTime(data) {
				this.addForm.year = data;
			},
			editClass() {
				this.editTaskName = this.editTaskName.replace(/\s+/g, "");
				if(this.editTaskName == "" ||  this.editTaskName.length > 20) {
					this.nullBtn = true;
					setTimeout(() => {
						this.nullBtn = false;
					}, 2000);
				} else {
					this.$http.post(utils.UrlConfig.updateScheduleTask + "&taskId=" + this.editForm.id + "&taskName=" + this.editTaskName + "&grade=" + this.editForm.grade + "&year=" + this.editForm.year + "&term=" + this.editForm.term)
						.then(res => {
							res = res.data
							if(res.rtnCode === "0000000") {
								this.queryScheduleTaskData();
								this.editVisible = false;
							} else {
								this.$message.error(res.msg);
							}
						}).catch(error => {
							console.log(error)
						})
				}
			},
			storage(data, type) {
				sessionStorage.setItem('tnId', this.tnId);
				sessionStorage.setItem('taskId', data.id);
				sessionStorage.setItem("classType", data.classType);
				sessionStorage.setItem("gradeName", data.gradeName);
				if(type == 1) {
					sessionStorage.setItem("NameGo", "NameGo");
					this.$router.push({
						path: '/automatic/'
					});
				} else if(type == 2) {
					sessionStorage.removeItem('NameGo');
					this.$router.push({
						path: '/BaseSetting/teachTime'
					});
				} else if(type == 3) {
					sessionStorage.setItem("NameGo", "NameGo");
					this.$router.push({
						path: '/automatic/MasterTimetable'
					});
				}
			},
			enterDelete(){
						this.$http.post(utils.UrlConfig.deleteScheduleTask + "&taskId=" + this.multipleSelection[0].id)
						.then(res => {
							res = res.data
							if(res.rtnCode === "0000000") {
								const index = this.queryScheduleTaskList.indexOf(this.multipleSelection[0]);
								this.queryScheduleTaskList.splice(index, 1);
								this.dialogVisible = false;
							} else {
								this.$message.error(res.msg);
							}
						}).catch(error => {
							console.log(error)
						})
			},
			getToken() {
				//				var url = document.URL;
				//				var token = url.split("token=")[1];
				this.$http.get(utils.UrlConfig.getTokenValue)
					.then(res => {
						res = res.data
						if(res.rtnCode === "0000000") {
							this.tnId = res.bizData.tnId;
							this.queryScheduleTaskData();
							this.getGradeList();
						} else if(res.rtnCode === "1000001") {
							//							 console.log("鉴权失败！");
							this.loading2 = false;
							this.$message.error("鉴权失败");
							//  this.$router.push({path:'/wrong'});
						} else {
							this.$message.error(res.msg);
						}
					}).catch(error => {
						console.log(error)
					})
			},
			closeDialog(){
				this.addForm.taskName = '';
				this.addForm.grade = '';
				this.addForm.term = '';
				this.addForm.year = '';
			}
		}
	}
</script>
<style>
	.arrayTask .right {
		text-align: right;
		margin: 30px auto 20px;
		overflow: hidden;
	}

	.arrayTask thead tr th .el-checkbox {
		display: none;
	}

	.arrayTask tbody tr td .cell a {
		/*		text-decoration: none;*/
		color: #1f2d3d;
	}

	.arrayTask .errorText{
		font-size: 12px;
	}

	.arrayTask .layer .el-dialog__header{
		padding: 15px 20px;
		background: #36C6D3;
		line-height: 24px;
		color: #fffff;
	}

	.arrayTask .layer .el-dialog__header .el-dialog__title{
		color: #fff;
		font-size: 18px;
		font-weight: normal;
	}

	.arrayTask .layer .el-dialog__headerbtn .el-dialog__close{
		color: #fff;
	}

	.arrayTask .layer .el-dialog__body{
		text-align: center;
	}

	.arrayTask .layer .el-dialog__body span{
		color: #333;
	}

	.arrayTask .layer .el-dialog__footer {
		text-align: center;
	}

	.arrayTask .layer .dialog-footer .enterDelete{
		width: auto;
    padding: 0 20px;
    height: 34px;
    line-height: 34px;
    background: #36C6D3;
    vertical-align: middle;
    margin: 0 10px;
		border-radius: 0;
		border: none;
	}

/*	.newAdd {
		background: #e0797c !important;
		border: solid #e0797c 1px !important;
		color: #fff !important;
	}

	.newAdd:hover {
		background: #e0797c !important;
		border: solid #e0797c 1px !important;
		color: #fff !important;
	}

	.editBtn {
		background: #ecc134 !important;
		border: solid #ecc134 1px !important;
		color: #fff !important;
	}

	.editBtn:hover {
		background: #ecc134 !important;
		border: solid #ecc134 1px !important;
		color: #fff !important;
	}

	.deleteBtn {
		background: #6b9edd !important;
		border: solid 1px #6b9edd !important;
		color: #fff !important;
	}

	.deleteBtn:hover {
		background: #6b9edd !important;
		border: solid 1px #6b9edd !important;
		color: #fff !important;
	}
*/
	.handIcon {
		cursor: pointer;
	}
</style>
